<template>
	<Layout :showBack="true" :innerBottom="false">
		<template #title>账号申请</template>

		<view class="iflex column asc register-form">
			<uni-forms ref="formRef" :model="formData" :rules="rules" label-position="top">
				<uni-forms-item name="contactName" label="姓名">
					<uni-easyinput v-model="formData.contactName" maxlength="20" placeholder="请输入姓名" :clearable="false"
						:inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="contactPhone" label="联系方式">
					<uni-easyinput v-model="formData.contactPhone" maxlength="11" placeholder="请输入联系方式"
						:clearable="false" :inputBorder="false" primaryColor="#FF710A" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="iflex column fill aic" style="margin-top: 140rpx;">
			<u-button style="{width:100%}" :custom-style="{width:'686rpx'}" type="primary" size="large"
				@click.stop="tapSubmit">确定</u-button>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { register } from '@/apis/auth';
	const formRef = ref();
	const formData = ref({
		contactName: '',
		contactPhone: ''
	});
	const rules = ref({
		contactName: {
			rules: [
				{ required: true, errorMessage: '请填写姓名' },
				{
					minLength: 2,
					maxLength: 20,
					errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		contactPhone: {
			rules: [
				{ required: true, errorMessage: '请填写联系电话' },
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		}
	})

	function tapSubmit() {
		formRef.value.validate().then(() => {
			register(formData.value).then((result) => {
				if (result.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: result.msg ?? '服务器忙，请稍后再试'
					})
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '申请成功，请等待审核',
					duration: 3000
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 3000)
			});
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
</script>

<style lang="scss">
	.register-form {
		margin-top: 48rpx;
		padding: 28rpx 28rpx 8rpx 28rpx;
		width: 686rpx;
		border-radius: 8rpx;
		background: #FFF;

		:deep(.uni-forms-item__label) {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		:deep(.uni-easyinput__content) {
			border-radius: 6rpx !important;
			background-color: #F9F9F9 !important;

			.uni-easyinput__content-input {
				height: 92rpx !important;
				border-radius: 6rpx !important;
				padding: 0 30rpx;
				background-color: #F9F9F9;
			}
		}
	}
</style>